<template>
	<view class="template-create tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :isBack="true">
			申请认证
		</tn-nav-bar>
	<view class=" tn-bg-white" :style="{paddingTop: vuex_custom_bar_height + 'px'}" v-if="status==0">
			<view class="tn-margin  tn-padding tn-flex  tn-flex-row-center tn-margin-top-sm" style="border-radius: 10rpx;margin-top: 350rpx;">
						<view  
							style="font-size: 20px;padding: 80rpx;" >
							<view class="tn-icon-more-circle-fill tn-color-red" style="font-size: 100px;"></view>
							<view style="font-size: 14px;" class="tn-text-center">审核人员将在三个工作日内进行审核，尽情留言系统通知，（优质用户，可能需要配合进行人工过审核，如有疑问需要帮助，请联系客服）</view>							
						<view class="tn-color-black tn-text-df tn-text-center tn-padding-top" @click="fanhui()">
						<tn-tag  :plain="true" shape="radius" margin="10rpx"  width="150rpx">
						<text >返回</text>
						</tn-tag>
						
						</view>
						
						</view>
		</view>
	
	</view>		
			
			<view class=" tn-bg-white" :style="{paddingTop: vuex_custom_bar_height + 'px'}" v-if="status==1">
					<view class="tn-margin  tn-padding tn-flex  tn-flex-row-center tn-margin-top-sm" style="border-radius: 10rpx;margin-top: 350rpx;">
								<view @click="voctap" 
									style="font-size: 20px;padding: 80rpx;" >
									<view class="tn-icon-success-circle-fill tn-color-green" style="font-size: 100px;"></view>
									<view style="font-size: 14px;" class="tn-text-center">你已经申请通过了，个人主页会显示你的认证哦 </view>							
								<view class="tn-color-black tn-text-df tn-text-center tn-padding-top" @click="fanhui()">
								<tn-tag  :plain="true" shape="radius" margin="10rpx"  width="150rpx">
								<text >返回</text>
								</tn-tag>
								
								</view>
								
								</view>
				</view>
			
			</view>	
			
		<view class=" tn-bg-white" :style="{paddingTop: vuex_custom_bar_height + 'px'}" v-if="status==-1">
						
			<view class=" clamp-text-1 tn-text-justify tn-margin" @click="chooseImagebj()">
				<text class="tn-text-bold">上传图片</text> <text style="font-size: 12px;">（禁止盗用他人图片，发现将封号）</text>
				<view class="tn-margin-top tn-bg-gray--light" style="border-radius: 10rpx;position: relative;">
					<image :src="bgimgnews" mode="aspectFill"></image>
					<view class="tn-icon-camera-fill tn-color-black" style="left: 45%;
							position: absolute;
							top:45%;
							font-size: 40px;"></view>
					<view class=" tn-color-gray" style="left: 10%;
							position: absolute;
							top:65%;
							font-size: 14px;">
							<text v-if="type==0">请上传你的工作证照片或者社保缴纳记录截图</text>
							<text v-else>请上传与你的个人正面照片或者生活照</text>
							</view>		
							
							
				</view>
			</view>	
			
			<view class=" tn-flex-2 tn-bg-gray--light tn-margin" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
				<input placeholder="请填写想要认证的职位名称" name="input" v-model="workname" placeholder-style="color:#AAAAAA"></input>
			</view>

			<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center" @click="chuanbgip()">
						<tn-button backgroundColor="tn-cool-bg-color-6"   padding="40rpx 0" width="60%" shadow fontBold>
							<text class="">确定申请</text>
						</tn-button>
					</view>
		</view>
		


			
			<view style="height: 30px;">
			</view>
	<tn-cropper v-show="bgshow" :imageUrl="imageUrl" :isRound="isRound" @cropper="cropperFinish"
				@closecopper="close"></tn-cropper>


	

	</view>
</template>

<script>
	import {
		host
	} from '@/siteinfo.js'
	const audioContext = uni.createInnerAudioContext()
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplateCreate',
		mixins: [template_page_mixin],
		data() {
			return {
				workname:'',
				status:-1,
				game_id:0,
				shengaozhi:'50',
				tizhongzhi:'50',
				shengao:'150',
				tizhong:'75',
				zhiye:'',
				wxhao:'',
				date: '请选择生日',
				riqishow: false,
				mode: 'date',
				bgimgnews:'',
				bgshow:false,
				voc: false,
				vocurl: "",
				vocscend: 0,
				vocurlpass: "",
				vocurlxuanze: "",
				isplay: false,
				op: '',
				truehead: '',
				isRound: true,
				imageUrl: '',
				show: false,
				avatar: '',
				body: [],
				action: '',
				title: '',
				dec: '',
				vovnew: '',
				price:'',
				sex: 0,
				danwei:'局',
				yanse0: "#e6e6e6",
				yanse1: "#e6e6e6",
				yanse2: "#e6e6e6",
				tagLength: 5, //标签选择的最多个数
				headerPosition: 'fixed',
				checktags: '',
				tags_user: [],
				bgimgbendi:'',
				tjbgimg:'',
				type:0
			}
		},
		
		onLoad(option) {			
			let that = this
			that.action = host + '/chat/user/up_img'	
				that.info()
		},
		methods: {
			fanhui(){
				uni.navigateBack()
			},
			
			// 选择图片
			close() {
				this.show = false
			},

			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0]
						this.imageUrl = tempFilePaths
						this.show = true
					}
				})
			},
			
			chooseImagebj() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0]
					  this.bgimgnews=tempFilePaths
					  this.bgimgbendi=tempFilePaths
						
					}
				})
			},
			
			
			
			
			// 裁剪完成
			cropperFinish(res) {
				 this.cropperImageUrl = res.path;
				this.avatar = this.cropperImageUrl
				this.show = false
			},
			
			async info() {
				let that = this;
				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: '/chat/user/renzheng_info',
					data: {
						type:'work'
					}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {						
						that.body = result.data.data;
						if (that.body.status==0){	
							that.status=0
						}
						else if (!that.body.status){						
						that.status=-1
						}else{
						that.status=that.body.status
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}


			},




		chuanbgip() {
		
			if (!this.bgimgbendi) {
				this.msg('请上传图片')
				return
			}	
			
		if (!this.workname) {
			this.msg('请填写想要认证的工作职位名称')
			return
		}
			
			uni.showLoading({
				title:'提交中'
			})
		  if (this.bgimgbendi){		
			uni.uploadFile({
				url: this.action, //仅为示例，非真实的接口地址
				filePath: this.bgimgbendi,
				name: 'file',
				formData: {
					'token': uni.getStorageSync('token'),
					'user': 'test'
				},
				success: (uploadFileRes) => {
					let data = JSON.parse(uploadFileRes.data)
					this.tjbgimg = data.data.file	
					this.post()
				}
			});
		}
		else{
			this.post()
		}
		
		},

			async post() {
				let that = this;		
				let result = await that.$request({
					loading:1,
					method: 'post',
					url: '/chat/user/renzheng_pass',
					data: {			
						workname:this.workname,
						images:that.tjbgimg,
						type:'work'
					}
				});
	
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						uni.hideLoading()
						console.log(333)
						that.msg('申请成功等待审核')											
						that.info()
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}


			},
		

		}
	}
</script>

<style lang="scss" scoped>
	.template-edit {}

	.about {

		&__wrap {
			position: relative;
			z-index: 1;
			margin: 20rpx 30rpx;
			margin-top: -230rpx;
		}
	}

	/* 顶部背景图 start */
	.top-backgroup {
		height: 350rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 250rpx;
			// z-index: -1;
		}
	}

	/* 用户头像 start */
	.logo-image {
		width: 210rpx;
		height: 210rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 8rpx solid rgba(255, 255, 255, 0.05);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	.bg-flex-shadow {
		background-color: #00C3FF;
		z-index: 9999;
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 底部悬浮按钮 start*/
	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		bottom: 0;
		left: 0;
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 10;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	.tn-shadow-blurddd {
		border: 2px solid black;
	}



  .tn-slider__custom-block {
   
    width: auto;
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 10rpx;
    border-radius:20px;
    text-align: center;
    color: #FFFFFF;
  }
	/* 标签内容 end*/
</style>
